<template>
	<div style='height:100%;' ref='containerRef'>
		<v-chart v-if='value' :autoresize='true' :option='options'></v-chart>
		<XLoading v-else></XLoading>
	</div>
</template>

<script lang='ts'>
	import { use } from "echarts/core";
	import {
		BarChart
	} from 'echarts/charts'
import { computed, defineComponent, ref, toRef } from "vue";
	use([
		BarChart
	])
	interface Props {
		modelValue : {
			area : any[],
			data : any[]
		}
	}

	export default defineComponent({
		props : {
			modelValue : {
				type : [Array, Object],
				default : function() {
					return null
				}
			}
		},
		
		setup(props:Props) {
			let containerRef = ref<{[key:string]:any}>({})
			const value = toRef(props, 'modelValue')

			const options = computed(() => {
				var xAxisData = value.value.area
				var seriesData = value.value.data

				let series = seriesData.map((value, index) => {
					var startColor = '#b578f4'
					var endColor = '#873bfe'
					if(index % 2 != 0) {
						startColor = '#7aa5f4'
						endColor = '#3f75fd'
					}
					return {
						value : value,
						itemStyle : {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 1,
								y2: 1,
								colorStops: [{
									offset: 0, color: startColor // 0% 处的颜色
								}, {
									offset: 1, color: endColor // 100% 处的颜色
								}]
							}
						}
					}
				})

				var options =  {
					tooltip : {
						show : true,
						trigger : 'axis'
					},
					grid : {
						top : '10px',
						right : '30px',
						bottom : '20px',
						left : '60px'
					},
					
					
					xAxis: {
						type: 'category',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},
						data: xAxisData
					},
					yAxis: {
						type: 'value',
						axisLine : {
							lineStyle : {
								color : '#373f50'
							}
						},
						axisTick : {
							show : false
						},

						axisLabel : {
							show : true,
							color : '#a3a5a9'
						},

						splitLine : {
							show : true,
							lineStyle : {
								color : '#373f50'
							}
						}
					},
					
					series: [{
						data: series,
						smooth : true,
                        type: 'bar',
                        barWidth : 15
					}]
				}

				return options
			})


			return {
				containerRef,
				value,
				options
			}
		}
	})
</script>